<template>
  <view class="center">
    <view
      class="logo"
      :hover-class="!login ? 'logo-hover' : ''"
    >
      <image
        class="logo-img"
        :src="userInfo.wxImageUrl ? userInfo.wxImageUrl : avatarUrl"
      ></image>
      <view class="logo-title" v-if="!isLogin">
        <text class="uer-name">Hi，您未登录</text>
        <text class="go-login navigat-arrow">&#xe65e;</text>
      </view>
      <view class="logo-title" v-else>
        <text class="uer-name">Hi，{{ userInfo.wxNickName }}</text>
        <!-- <text class="go-login navigat-arrow">&#xe65e;</text> -->
      </view>
    </view>

    <view class="center-list block-setting" @click="goSetting">
      <view class="center-list-item">
        <!-- <text class="list-icon">&#xe614;</text> -->
        <image class="icon-setting" src="@/static/icons/icon-setting.png" />
        <text class="list-text">设置</text>
        <text class="navigat-arrow">&#xe65e;</text>
      </view>
    </view>
    <!-- <Message class="message"></Message> -->
  </view>
</template>

<script>
import Message from '@/components/message'

export default {
  components: {
    Message,
  },
  data() {
    return {
      login: false,
      avatarUrl: '/static/logo.png',
      // uerInfo: {},
    }
  },
  computed: {
    userInfo() {
      // console.log(uni.getStorageSync('userData'))
      return uni.getStorageSync('userData')
    },
    isLogin() {
      return this.userInfo && this.userInfo.username
    },
  },
  onShareAppMessage() {
    console.log("分享小程序");
  },
  methods: {
    // 跳转登录
    goLogin() {
      if (!this.login) {
        uni.navigateTo({
          url: '/pages/account/login',
        })
      }
    },
    goSetting() {
      uni.navigateTo({
        url: '/pages/account/setting',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: texticons;
  font-weight: normal;
  font-style: normal;
  src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf')
    format('truetype');
}

.message {
  display: flex;
  flex: 1;
  height: 100vh;
}

page {
  background-color: #f8f8f8;
}

.icon-setting {
  width: 56rpx;
  height: 56rpx;
  margin-right: 20rpx;
}

.center {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.logo {
  display: flex;
  width: 100%;
  height: 240rpx;
  padding: 30rpx;
  box-sizing: border-box;
  background-color: #0ac7b9;
  align-items: center;
  .logo-img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 120rpx;
  }

  .logo-title {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    margin-left: 20rpx;
  }

  &.logo-hover {
    opacity: 0.8;
  }
}

.uer-name {
  font-size: 38rpx;
  color: #ffffff;
}

.go-login.navigat-arrow {
  font-size: 38rpx;
  color: #ffffff;
}

.block-setting {
  width: 90%;
  margin: 0 auto;
  position: relative;
  top: -20px;
}

.center-list {
  background-color: #ffffff;

  flex-direction: column;
  border-radius: 10rpx;

  .center-list-item {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    flex-direction: row;
    padding: 0rpx 20rpx;

    .list-icon {
      width: 40rpx;
      font-size: 34rpx;
      color: #1fc0e1;
      text-align: center;
      font-family: texticons;
      margin-right: 20rpx;
    }

    .list-text {
      font-size: 34rpx;
      color: #555;
      flex: 1;
      text-align: left;
    }

    .navigat-arrow {
      width: 40rpx;
      font-size: 34rpx;
      color: #555;
      text-align: right;
      font-family: texticons;
    }
  }
}

.navigat-arrow {
  width: 40rpx;
  font-size: 34rpx;
  color: #555;
  text-align: right;
  font-family: texticons;
}
</style>
